<template>
    <div>
        <iview-table
                ref="table"
                :baseURL="queryModel.baseURL"
                :menuId="dataModel.menuId"
                :columns="dataModel.columns"
                :order="dataModel.order"
                :pageNumber="pageModel.pageNumber"
                :pageSize="pageModel.pageSize"
                :defaultFilters="queryModel.defaultFilters"
                v-on="{changeTotalSize:changeTotalSize,changeSelect:changeSelect}">
        </iview-table>
        <Modal v-model="showModal" :closable='false' :mask-closable=true :width="1000">
            <h3 slot="header" style="color:#2D8CF0">置换</h3>
            <Card :bordered="false" :dis-hover="true">
                <p slot="title">
                    可选产品
                </p>
                <product-list v-on="{select:select}"></product-list>
            </Card>
            <Card :bordered="false" :dis-hover="true">
                <p slot="title">
                    已选产品
                </p>
                <Table border :columns="columns1" :data="data1"></Table>
            </Card>
            <div slot="footer">
                <p align="right">
                    <Button type="primary" size="large" @click="doReplace">确认</Button>
                </p>
            </div>
        </Modal>
        <Modal v-model="showMedical" @on-ok="doAddMedical" ok-text="保存" cancel-text="取消" :closable='false' :mask-closable=true :width="600">
            <p slot="header">
                <span>添加医嘱</span>
            </p>
            <Input v-model="medicalAdvice" type="textarea" :rows="10" :autosize="{minRows: 10}" placeholder="请输入医嘱..."></Input>
        </Modal>
    </div>
</template>

<script>
    import iviewTable from '@/view/common/table/Table.vue';
    import iviewPage from '@/view/common/page/Page.vue';
    import productList from '@/view/basic/info/list/ProductList.vue';
    import Table from "../../../common/table/Table";
    export default {
        components: {
            Table,
            iviewTable,
            iviewPage,
            productList
        },
        props: {
            homeId: {
                type: Number,
                default: -1
            },
            planType: {
                type: Number,
                default: -1
            }
        },
        data () {
            return {
                baseURL: '/user/treat/plan/home/product',
                selectRow: {},
                selectRows: [],
                showModal: false,
                showMedical: false,
                medicalAdvice: '',
                queryModel: {
                    // 网关代理路径(必须)+资源路径(可选)
                    baseURL: '/user/treat/plan/home/product',
                    defaultFilters: [
                        {'field': 'home_id', 'value1': -1, 'operate': '=='},
                        {'field': 'plan_type', 'value1': this.planType, 'operate': '=='}
                    ]
                },
                dataModel: {
                    menuId: -1,
                    columns: [
                        {
                            title: '名称',
                            key: 'productName',
                        },{
                            title: '数量',
                            key: 'quantity',
                            width: 80
                        },
                        {
                            title: '医嘱',
                            key: 'medicalAdvice',
                        },{
                            title: '状态',
                            key: 'status',
                            width: 100,
                            render: (h, params) => {
                                let temp = params.row.status
                                if (temp === 0) {
                                    return h('div', [
                                        h('Tag', {
                                            props: {
                                                type: 'border',
                                                color: 'green'
                                            },
                                            style: {
                                            }
                                        }, '进行中')
                                    ]);
                                } else if (temp === 2) {
                                    return h('div', [
                                        h('Tag', {
                                            props: {
                                                type: 'border',
                                                color: 'red'
                                            },
                                            style: {
                                            }
                                        }, '已停止')
                                    ]);
                                } else if (temp === 3) {
                                    return h('div', [
                                        h('Tag', {
                                            props: {
                                                type: 'border',
                                                color: 'yellow'
                                            },
                                            style: {
                                            }
                                        }, '已更换')
                                    ]);
                                }
                            }
                        },
                        {
                            title: '操作',
                            align: 'center',
                            width: 300,
                            render: (h, params) => {
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'default'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.showAddMedical(params.row)
                                            }
                                        }
                                    }, '下医嘱'),
                                    h('Button', {
                                        props: {
                                            type: 'warning',
                                            size: 'default'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.stop(params.row)
                                            }
                                        }
                                    }, '停止'),
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'default'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.replace(params.row)
                                            }
                                        }
                                    }, '置换'),
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'default'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.delete(params.row)
                                            }
                                        }
                                    }, '删除')
                                ]);
                            }
                        }
                    ],
                    order: 'id desc'
                },
                pageModel: {
                    totalSize: 0,
                    pageNumber: 1,
                    pageSize: 10,
                    pageSizeOpts: [10, 50, 100, 500]
                },
                data1: [],
                columns1: [
                    {
                        title: '大类',
                        key: 'bigClassName',
                        width: 150
                    },
                    {
                        title: '小类',
                        key: 'smallClassName',
                        width: 150
                    },
                    {
                        title: '产品名称',
                        key: 'name'
                    },
                    {
                        title: '数量',
                        key: 'quantity',
                        width: 150,
                        render: (h, params) => {
                            var vm = this
                            return h('InputNumber',{
                                props: {
                                    min: 1,
                                    value: params.row.quantity
                                },
                                style: {
                                    width: '100%'
                                },
                                on: {
                                    'on-change' (value) {
                                        params.row.quantity = value
                                        vm.data1[params.index] = params.row
                                    }
                                }
                            });
                        }
                    },
                    {
                        title: '操作',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'default'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index, params.row)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ]
            };
        },
        methods: {
            select (row) {
                row.productName = row.name
                row.quantity = 1
                this.data1.push(row)
            },
            remove (index, row) {
                this.data1.splice(index, 1);
            },
            showAddMedical (row) {
                this.medicalAdvice = ''
                this.selectRow = row
                this.showMedical = true
            },
            doAddMedical () {
                this.selectRow.medicalAdvice = this.medicalAdvice
                let url = this.baseURL + '/save'
                this.$ajax.post(url, this.selectRow).then((response) => {
                    let {code, msg} = response.data
                    if (code === 0) {
                        this.$bus.alert('success', '保存成功')
                        this.refresh()
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            stop (row) {
                if (row.status === 1) {
                    this.$Modal.confirm({
                        title: '操作提示',
                        content: '<p>是否确认停止使用?</p>',
                        onOk: () => {
                            this.doStop(row.id)
                        }
                    })
                } else {
                    this.$bus.alert('warning', '不符合条件')
                }
            },
            doStop (id) {
                let url = this.baseURL + '/stop/' + id
                this.$ajax.post(url).then(response => {
                    let {code, msg} = response.data
                    if (code === 0) {
                        this.$bus.alert('success', '已停止')
                        this.refresh()
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            replace (row) {
                if (row.status === 0) {
                    this.selectRow = row
                    this.showModal = true
                } else {
                    this.$bus.alert('warning', '不符合条件')
                }
            },
            doReplace () {
                if (this.data1.length > 0) {
                    let url = this.baseURL + '/replace'
                    this.$ajax.post(url, {
                        d1: JSON.stringify(this.selectRow),
                        d2: JSON.stringify(this.data1)
                    }).then(rs => {
                        let {code, msg} = rs.data
                        if (code === 0) {
                            this.$bus.alert('success', '置换成功')
                            this.showModal = false
                            this.refresh()
                        } else {
                            this.$bus.alert('error', msg)
                        }
                    })
                } else {
                    this.$bus.alert('warning', '请选择置换产品')
                }
            },
            delete (row) {
                this.$Modal.confirm({
                    title: '操作提示',
                    content: '<p>确认删除当前记录?</p>',
                    onOk: () => {
                        this.doDelete(row.id)
                    }
                })
            },
            doDelete (id) {
                let url = this.baseURL + '/delete/' + id
                this.$ajax.post(url).then(rs => {
                    let {code, msg} = rs.data
                    if (code === 0) {
                        this.$bus.alert('success', '删除成功')
                        this.refresh()
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            refresh () {
                if (this.homeId && this.homeId !== '') {
                    this.queryModel.defaultFilters[0] = {'field': 'home_id', 'value1': this.homeId, 'operate': '=='}
                }
                this.$refs.table.refresh()
            },
            changeSelect (rows) {
                this.selectRows = rows
            },
            changeTotalSize (totalSize) {
                this.pageModel.totalSize = totalSize
            },
            changePageNumber (pageNumber) {
                this.pageModel.pageNumber = pageNumber
            },
            changePageSize (pageSize) {
                this.pageModel.pageSize = pageSize
            },
            init () {
                this.refresh()
            }
        },
        mounted () {
            // this.init()
        },
        watch: {
            homeId: function (val, oldVal) {
                if (val && val !== '' && val !== -1) {
                    this.refresh()
                }
            }
        }
    }
</script>

<style>

</style>
